<template>
	<div>
		<div v-for="(item,index) in dataList" :key="index">
			{{item}}
			<model-stl ref="model" @on-mousemove="onMouseMove" :src="item" :scale="{x:scale,y:scale,z:scale}"
				:lights="[{type:'DirectionalLight',color:0xFFFFFF,intensity:1,decay:0,position:light}]">
			</model-stl>
		</div>
	</div>
</template>

<script>
	import {
		ModelStl,
	} from 'vue-3d-model';
	export default{
		name:'modelList',
		props:{
			dataList:{
				type:Array
			}
		},
		data(){
			return{
				scale:0.5,
				light: {
					x: 0,
					y: 0,
					z: 100
				},
				intersected: null,
			}
		},
		methods:{
			onMouseMove(event) {
				// this.light = this.$refs.model.camera.position
				if (!event) {
			
					if (this.intersected) {
						this.intersected.material.color.setStyle('#ff4658');
					}
			
					this.intersected = null;
					return;
				}
			
				this.intersected = event.object;
				this.intersected.material.color.setStyle('#ff4658');
			}
		},
		components:{
			ModelStl
		}
	}
</script>

<style>
</style>
